<template>
  <div class="RecommendBanner clearfix">
    <div class="Recommend">
      <img src="../assets/clock.jpg" alt="每日推荐" />
      <h3>每日推荐</h3>
      <h2>DAILYBEST</h2>
    </div>
    <ul>
      <li class="Gooditem_li" v-for="item in recommendGoods" :key="item.index">
        <GoodItem :item="item" />
      </li>
    </ul>
  </div>
</template>

<script>
import GoodItem from "@/components/GoodItem.vue";
import { getIndexRecommendGoodsLists } from "@/apis/getData.js";
import { onMounted, ref } from "vue";
export default {
  components: {
    GoodItem,
  },
  setup() {
    // 初始化推荐栏展示
    const recommendGoods = ref();
    onMounted(() => {
      getIndexRecommendGoodsLists().then((res) => {
        recommendGoods.value = res.data.data;
      });
    });

    return {
      recommendGoods,
    };
  }
};
</script>

<style scoped>
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: ".";
  height: 0;
}

.RecommendBanner {
  width: 1200px;
  margin: 20px auto;
}
.Recommend {
  float: left;
  width: 200px;
  height: 290px;
  background-color: #26a2f5;
  text-align: center;
  margin-left: 70px;
}
.Recommend img {
  margin: 75px 0 10px 0;
}
.Recommend h3 {
  font-size: 18px;
  color: #fff;
  font-weight: normal;
  border-bottom: 2px solid #fff;
}
.Recommend h2 {
  color: #fff;
  font-weight: normal;
}
.Gooditem_li {
  list-style: none;
  background: #fff;
  float: left;
}
</style>